Angular Material এর Button কম্পোনেন্ট একটি গুরুত্বপূর্ণ UI উপাদান, যা অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীদের সাথে যোগাযোগের জন্য ব্যবহার করা হয়। Angular Material বাটন কম্পোনেন্টটি ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে এবং এটি বিভিন্ন ধরনের স্টাইল এবং ফিচার সরবরাহ করে, যেমন raised, flat, stroked, এবং icon buttons। এগুলো অ্যাপ্লিকেশনের ডিজাইন এবং ইন্টারেকশন আরও উন্নত করে।

বাটন কম্পোনেন্টের বৈশিষ্ট্য

Angular Material এর বাটন কম্পোনেন্টটির কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য:

• Flat Buttons: সাধারণ বাটন, যা একেবারে ফ্ল্যাট ডিজাইনে থাকে।
• Raised Buttons: বাটনের উপরে শ্যাডো থাকে, যা এটিকে আরও দৃষ্টিনন্দন করে তোলে।
• Stroked Buttons: একটি আউটলাইন সহ বাটন, যার ভেতরের অংশ সাদা বা ট্রান্সপারেন্ট থাকে।
• Icon Buttons: শুধুমাত্র একটি আইকন ব্যবহার করে তৈরি বাটন।
• Disabled State: বাটনটি অক্ষম (disabled) অবস্থায় থাকতে পারে।
• Color Options: বাটনের রঙ কাস্টমাইজ করা যায়, যেমন primary, accent, বা warn।

বাটন ব্যবহার করা

Angular Material বাটন ব্যবহার করতে, প্রথমে আপনাকে MatButtonModule ইমপোর্ট করতে হবে। তারপর HTML এ বাটন কম্পোনেন্ট ব্যবহার করা যাবে।

১. app.module.ts ফাইলে MatButtonModule ইমপোর্ট করা

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatButtonModule
  ]
})
export class AppModule { }

২. HTML-এ বাটন ব্যবহার করা

<button mat-button>Flat Button</button>
<button mat-raised-button>Raised Button</button>
<button mat-stroked-button>Stroked Button</button>
<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>
<button mat-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-button color="warn">Warn Button</button>

বাটন ট্যাগের বিভিন্ন ভেরিয়েন্ট

১. Flat Button

ফ্ল্যাট বাটন সাধারণত টেক্সট দিয়ে তৈরি হয় এবং এতে কোন শ্যাডো বা বর্ডার থাকে না।

<button mat-button>Flat Button</button>

২. Raised Button

Raised button বা উঁচু বাটনে শ্যাডো এবং ভিন্ন রঙের ব্যাকগ্রাউন্ড থাকে। এটি ব্যবহারকারীর কাছে একটি কার্যকরী এবং দৃশ্যমান বাটন হিসাবে উপস্থিত হয়।

<button mat-raised-button>Raised Button</button>

৩. Stroked Button

Stroked button একটি আউটলাইন সহ বাটন, যা অন্যান্য বাটনের চেয়ে কিছুটা হালকা দেখায়।

<button mat-stroked-button>Stroked Button</button>

৪. Icon Button

Icon button শুধুমাত্র একটি আইকন দিয়ে তৈরি হয়, এটি সাধারণত অ্যাপ্লিকেশনের বিভিন্ন অ্যাকশন বোতাম হিসেবে ব্যবহৃত হয়।

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

৫. Colored Buttons

Angular Material এর বাটন কম্পোনেন্টে আপনি রঙ পরিবর্তন করতে পারেন, যেমন primary, accent, বা warn।

<button mat-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-button color="warn">Warn Button</button>

বাটন ক্লিক ইভেন্ট হ্যান্ডলিং

Angular Material বাটনে ক্লিক ইভেন্ট হ্যান্ডল করতে (click) ডিরেকটিভ ব্যবহার করা হয়।

<button mat-raised-button (click)="onClick()">Click Me</button>

এখানে onClick() একটি ফাংশন হবে, যা TypeScript ফাইলে ডিফাইন করতে হবে।

export class AppComponent {
  onClick() {
    console.log('Button Clicked!');
  }
}

বাটন ডিজেবল করা

বাটনটিকে ডিফল্ট অবস্থায় অক্ষম (disabled) করতে, [disabled] প্রোপার্টি ব্যবহার করা হয়।

<button mat-raised-button [disabled]="isDisabled">Disabled Button</button>

এখানে isDisabled একটি বুলিয়ান ভেরিয়েবল হবে যা TypeScript ফাইলে ডিফাইন করা হবে।

export class AppComponent {
  isDisabled = true;
}

Angular Material এর বাটন কম্পোনেন্ট ব্যবহার করা সহজ এবং এটি অ্যাপ্লিকেশনটির UI-তে একটি আধুনিক এবং ইন্টারেকটিভ উপাদান যোগ করে। বিভিন্ন ধরনের বাটন যেমন flat, raised, stroked, এবং icon buttons ব্যবহার করে আপনার অ্যাপ্লিকেশনকে আরও উন্নত এবং ব্যবহারকারীর জন্য সুবিধাজনক করে তোলা সম্ভব। Angular Material এর বাটন কম্পোনেন্টের কাস্টমাইজেশন ফিচার এবং ইভেন্ট হ্যান্ডলিং সিস্টেম ডেভেলপারদের জন্য একটি শক্তিশালী টুল হয়ে দাঁড়ায়।

Angular Material একটি শক্তিশালী UI লাইব্রেরি, যা অনেক ধরনের কাস্টমাইজেবল বাটন সরবরাহ করে। এই বাটনগুলো ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে এবং অ্যাপ্লিকেশনের ডিজাইনে উন্নতমানের এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য প্রস্তুত করা হয়েছে। এখানে বিভিন্ন ধরনের বাটন যেমন Basic Button, Raised Button, Icon Button, এবং Floating Action Button (FAB) এর বিস্তারিত ব্যাখ্যা দেয়া হলো।

1. Basic Button (বেসিক বাটন)

Basic Button হলো সাদামাটা বাটন যা শুধুমাত্র একটি সাধারণ ক্লিকযোগ্য এলিমেন্ট হিসেবে কাজ করে। এটি কোনো শেড বা উঁচুতা ছাড়া একটি সাধারণ স্টাইলের বাটন।

ব্যবহার:

<button mat-button>Basic Button</button>

• mat-button ডিরেক্টিভ ব্যবহার করা হয়।
• এটি সাধারণত শুধুমাত্র টেক্সট দেখায় এবং কোনো শ্যাডো বা উত্তোলন (elevation) থাকে না।
• এটি বিভিন্ন ধরনের অ্যাকশন বা ইন্টারঅ্যাকশনের জন্য উপযুক্ত।

2. Raised Button (রেইজড বাটন)

Raised Button হলো একটি বাটন যার নিচে একটি শ্যাডো থাকে, ফলে এটি অন্য উপাদানগুলির তুলনায় একটু উঁচুতে থাকে। এই বাটনটি প্রধান অ্যাকশন বাটন হিসেবে ব্যবহৃত হয় এবং এটি ব্যবহারকারীদের নজর আকর্ষণ করতে সহায়তা করে।

ব্যবহার:

<button mat-raised-button>Raised Button</button>

• mat-raised-button ডিরেক্টিভ ব্যবহার করা হয়।
• এটি একটি সাইড শ্যাডো সহ বাটন, যা স্টাইলের মধ্যে এক্সট্রা ডিপথ তৈরি করে।
• এর মাধ্যমে গুরুত্বপূর্ণ অ্যাকশন বা অপশনগুলো প্রদর্শন করা যায়।

কাস্টম রং সহ রেইজড বাটন:

<button mat-raised-button color="primary">Primary Raised Button</button>

এখানে color="primary" দিয়ে বাটনের রঙ নির্ধারণ করা হয়েছে।

3. Icon Button (আইকন বাটন)

Icon Button হলো একটি বাটন যা শুধুমাত্র একটি আইকন ধারণ করে। এটি সাধারণত ছোট সাইজের অ্যাকশন বাটন হিসেবে ব্যবহৃত হয়, যেখানে টেক্সটের পরিবর্তে আইকন ব্যবহার করা হয়।

ব্যবহার:

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

• mat-icon-button ডিরেক্টিভ ব্যবহার করা হয়।
• mat-icon এলিমেন্টের মাধ্যমে আইকন যোগ করা হয়।
• এটি সাধারণত টুলবার বা সাইড মেনুর আইকন হিসেবে ব্যবহৃত হয়।

4. Floating Action Button (FAB) (ফ্লোটিং অ্যাকশন বাটন)

Floating Action Button (FAB) একটি বিশেষ ধরনের বাটন যা অ্যাপ্লিকেশনের স্ক্রিনের নিচে বা মাঝখানে সাসপেন্ডেড অবস্থায় থাকে এবং সাধারণত একটি প্রধান অ্যাকশন নির্দেশ করে। FAB ব্যবহারকারীকে প্রধান কাজগুলো দ্রুত সম্পাদন করতে সহায়তা করে। এটি সাধারণত একটি গোলাকার বাটন এবং বড় আকারে থাকে।

ব্যবহার:

<button mat-fab color="accent">
  <mat-icon>add</mat-icon>
</button>

• mat-fab ডিরেক্টিভ ব্যবহার করা হয়।
• এটি সাধারণত গোলাকার বাটন তৈরি করে এবং একটি আইকন ধারণ করে।
• color="accent" এর মাধ্যমে FAB এর রঙ কাস্টমাইজ করা যায়।

Mini FAB: ছোট আকারের FAB বাটন তৈরি করতে mat-mini-fab ব্যবহার করা হয়।

<button mat-mini-fab>
  <mat-icon>add</mat-icon>
</button>

এটি একটি ছোট আকারের ফ্লোটিং অ্যাকশন বাটন তৈরি করবে।

বাটন কাস্টমাইজেশন

Angular Material এর বাটনগুলোর সাথে বিভিন্ন ধরনের কাস্টমাইজেশন করা যায়। যেমন:

• Color: বাটনের রঙ পরিবর্তন করতে color অ্যাট্রিবিউট ব্যবহার করা হয়। Angular Material তিনটি রঙের বিকল্প প্রদান করে: primary, accent, এবং warn।
• Disabled State: বাটনকে নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করা হয়।

উদাহরণ:

<button mat-raised-button color="primary" [disabled]="isDisabled">Primary Button</button>

এখানে isDisabled একটি ভ্যারিয়েবল যা যদি true হয়, তবে বাটনটি নিষ্ক্রিয় থাকবে।

Angular Material এর বিভিন্ন ধরনের বাটন যেমন Basic, Raised, Icon, এবং Floating Action Button (FAB) আপনার অ্যাপ্লিকেশনে একটি আধুনিক, প্রফেশনাল, এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। এগুলো ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে, এবং সহজেই কাস্টমাইজ করা যায় আপনার প্রয়োজন অনুযায়ী।

Angular Material একটি শক্তিশালী UI লাইব্রেরি যা আপনাকে প্রি-বিল্ট এবং কাস্টমাইজেবল কম্পোনেন্ট প্রদান করে, যার মধ্যে অন্যতম হলো বাটন (Button)। Angular Material এর বাটন কম্পোনেন্ট ব্যবহার করে আপনি রেসপন্সিভ, আকর্ষণীয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সক্ষম হবেন। বাটন কম্পোনেন্টটি বিভিন্ন স্টাইল এবং অবস্থা নিয়ে কাজ করতে পারে, যেমন সাধারণ বাটন, রাইজড বাটন, ফ্ল্যাট বাটন, এবং অবস্থা পরিবর্তন।

অ্যাঙ্গুলার ম্যাটেরিয়াল বাটন স্টাইল

Angular Material বাটন কম্পোনেন্টে কিছু পূর্বনির্ধারিত স্টাইল রয়েছে যা আপনার অ্যাপ্লিকেশনের ডিজাইন অনুযায়ী কাস্টমাইজ করা যায়। এর মধ্যে রয়েছে:

• MatButton: সাধারণ বাটন
• MatRaisedButton: রাইজড বাটন
• MatFlatButton: ফ্ল্যাট বাটন
• MatIconButton: আইকন বাটন
• MatButtonToggle: বাটন টগল

১. সাধারণ বাটন (mat-button)

এটি Angular Material এর সবচেয়ে সাধারণ বাটন স্টাইল। এটি একটি সহজ বাটন যা কোনও শ্যাডো বা উত্তোলন ছাড়া সরাসরি প্রদর্শিত হয়।

<button mat-button>Click me</button>

২. রাইজড বাটন (mat-raised-button)

এটি একটি উত্তোলিত বাটন যা শ্যাডো সহ প্রদর্শিত হয়, এবং এটি সাধারণত গুরুত্বপূর্ণ অ্যাকশন বোতাম হিসেবে ব্যবহৃত হয়।

<button mat-raised-button>Click me</button>

৩. ফ্ল্যাট বাটন (mat-flat-button)

ফ্ল্যাট বাটন কোনও শ্যাডো বা উত্তোলন ছাড়া সাধারণ বাটন এর মতো কিন্তু এটিতে ব্যাকগ্রাউন্ড এবং বর্ডার সাধারণত রঙিন থাকে।

<button mat-flat-button>Click me</button>

৪. আইকন বাটন (mat-icon-button)

এটি একটি বাটন যা শুধুমাত্র একটি আইকন প্রদর্শন করে। সাধারণত এই বাটনটি ছোট পরিসরে আইকন ব্যবহার করতে ব্যবহৃত হয়।

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

৫. বাটন টগল (mat-button-toggle)

এটি একটি বিশেষ ধরনের বাটন যা টগল স্টাইলের বোতাম হিসেবে কাজ করে, যেখানে বাটন ক্লিক করলে এটি দুটো অবস্থার মধ্যে পরিবর্তন হতে পারে।

<mat-button-toggle-group>
  <mat-button-toggle value="left">Left</mat-button-toggle>
  <mat-button-toggle value="right">Right</mat-button-toggle>
</mat-button-toggle-group>

বাটন অবস্থা (Button States)

Angular Material বাটন বিভিন্ন অবস্থার জন্য বিভিন্ন স্টাইল সমর্থন করে, যেমন disabled, loading, active ইত্যাদি। এগুলি অ্যাপ্লিকেশনের বিভিন্ন কার্যকারিতার উপর ভিত্তি করে ব্যবহার করা যায়।

১. Disabled বাটন

যদি আপনি কোনও বাটনকে নিষ্ক্রিয় (disabled) করতে চান, তাহলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<button mat-raised-button disabled>Disabled Button</button>

২. লোডিং অবস্থা

বাটনের উপর একটি লোডিং ইন্ডিকেটর ব্যবহার করতে পারেন। Angular Material এ MatProgressSpinner ব্যবহার করে লোডিং ইন্ডিকেটর প্রদর্শন করা হয়।

<button mat-raised-button [disabled]="isLoading">
  <mat-spinner *ngIf="isLoading" diameter="20"></mat-spinner>
  Submit
</button>

এখানে isLoading একটি boolean ভেরিয়েবল যা আপনার লোডিং স্টেট নিয়ন্ত্রণ করবে।

৩. Active অবস্থা

বাটনটি অ্যাকটিভ অবস্থা চিহ্নিত করতে, অ্যাপ্লিকেশনে কিছু সিএসএস ক্লাস ব্যবহার করতে পারেন।

<button mat-raised-button [class.active]="isActive">
  Active Button
</button>

এখানে isActive একটি boolean ভেরিয়েবল যা বাটনের অ্যাকটিভ স্টেট নির্ধারণ করবে।

বাটন স্টাইল কাস্টমাইজেশন

Angular Material বাটনের স্টাইল কাস্টমাইজ করা খুব সহজ। আপনি CSS বা SCSS ব্যবহার করে বাটনের আকার, রং, বর্ডার এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন।

১. বাটনের রঙ কাস্টমাইজ করা

আপনি color অ্যাট্রিবিউট ব্যবহার করে বাটনের রঙ পরিবর্তন করতে পারেন। Angular Material বাটনে তিনটি প্রাথমিক রঙ সাপোর্ট করে: primary, accent, এবং warn।

<button mat-raised-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-raised-button color="warn">Warn Button</button>

২. কাস্টম CSS ব্যবহার

আপনি CSS বা SCSS ব্যবহার করে বাটনের স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

button.mat-raised-button {
  background-color: #ff4081;
  color: white;
}

এটি বাটনের ব্যাকগ্রাউন্ড এবং ফন্ট রঙ পরিবর্তন করবে।

Angular Material বাটন একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজেবল কম্পোনেন্ট, যা আপনার অ্যাপ্লিকেশনের UI ডিজাইনকে আরও আকর্ষণীয় ও ব্যবহারকারী-বান্ধব করতে সহায়ক। এটি বিভিন্ন স্টাইল এবং অবস্থা (যেমন, সাধারণ বাটন, রাইজড বাটন, ফ্ল্যাট বাটন, আইকন বাটন) সমর্থন করে এবং আপনি সহজেই এর ডিজাইন কাস্টমাইজ করতে পারেন। Disabled, loading, এবং active অবস্থার মতো বিভিন্ন বাটন অবস্থা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।